<template>
	<div class="mask">
		<div class="preview">
			<ly-mobile >
				<i class="iconfont icon-delete-two" @click="handleCancel"></i>
				<div class="bgm-btn" v-if="h5Config.bgm" :class="{rotate: isPlay}" @click="togglePlay">
					<audio ref="music" :src="h5Config.bgm" autoplay preload="auto" loop></audio>
				</div>
				<swiper :options="swiperOption" ref="mySwiper">
					<swiper-slide v-for="(page, idx) in pages" :key="page.id">
						<div class="wrap-bg" :style="{
						  backgroundColor: page.css.bgc,
						  backgroundImage: 'url(' + page.css.bgi + ')',
						  width:page.css.width,
						  height:page.css.height,
						  backgroundSize:page.css.backgroundSize,
						  position:'absolute'
						  }">
						</div>
						<div v-for="comp in page.comps" class="animated" :style="{zIndex:comp.css.z,position: 'relative'}" :class="{[animations[comp.anim.type]['class']]: activePage === idx}"
						 :key="comp.id">
							<component-renderer :comp="comp" @redirect="show_appoint_page" ></component-renderer>
						</div>
					</swiper-slide>
				</swiper>
			</ly-mobile>
		</div>
		
	</div>
		
	
</template>

<script>
	import {
		swiper,
		swiperSlide
	} from 'vue-awesome-swiper'
	import ComponentRenderer from '@/containers/component-renderer'
	import {
		ANI_NAME
	} from '@/const/animation-match.js'

	import lyMobile from '@/layouts/ly-mobile'
	
	export default {
		name: 'pickPreview',
		data() {
			return {
				isPlay: true,
				activePage: 0,
				animations: ANI_NAME,
				swiperOption: {
					direction: 'vertical'
				}
			}
		},
		computed: {
			preview() {
				return this.$store.getters.preview
			},
			Swiper() {
				return this.$refs.mySwiper.swiper
			},
			pages() {
				var pages = this.$store.getters.pages
				if (pages) {
					for (let page of pages) {
						for (let comp of page.comps) {
							this.$store.commit('EDIT_COMP', {
								type: 'isProview',
								compid: comp.id,
								value: true
							})
						}
					}
				}
				return pages;
			},
			h5Config() {
				return this.$store.getters.h5Config
			}
		},
		methods: {
			handleCancel() {
				// 是否是预览的状态
				const is_preview = this.$store.getters.preview
				// 获取页数
				var pages = this.$store.getters.pages
				// debugger
				if (pages && is_preview) {
					for (let page of pages) {
						for (let comp of page.comps) {
							// 设置视频的初始状态
							if (comp.name === 'Vedio') {
								// 返回时进行还原设置
								const updateBaseStyle = this.updateBaseStyle
								Object.keys(comp.position).forEach(function(key) {
									if (key !== 'z') {
										updateBaseStyle({
											key: 'base',
											value: {
												[key]: comp.position[key]
											},
											type: 'css',
											id: comp.id
										})
									} else {
										updateBaseStyle({
											key: 'z',
											value: comp.position[key],
											type: 'css',
											id: comp.id
										})
									}
								})
								this.edit_comp('showVedio', false, comp.id)
							}
							this.edit_comp('isProview', false, comp.id)
						}
					}
					// 关闭预览
					this.$store.commit('SET_PREVIEW', false)
				}
			},
			togglePlay() {
				const music = this.$refs.music
				if (this.isPlay) {
					this.isPlay = false
					music.pause()
				} else {
					this.isPlay = true
					music.play()
				}
			},
			show_appoint_page(id) {
				// 跳转到指定页面显示
				this.$refs.mySwiper.swiper.slideTo(id, 0, true)
			},
			// 更新基础的样式
			updateBaseStyle({
				key,
				value,
				type,
				id
			}) {
				this.$store.commit('EDIT_COMP', {
					type: type,
					compid: id,
					value: {
						[key]: value
					}
				})
			},
			// 更新一级目录中的属性
			edit_comp(type, value, id) {
				this.$store.commit('EDIT_COMP', {
					type: type,
					compid: id,
					value: value
				})
			},
		},
		components: {
			swiper,
			swiperSlide,
			lyMobile,
			ComponentRenderer
		}
	}
</script>
<style lang="scss">
	.preview-dialog .el-dialog__body {
		height: 576px;
		width: 328px;
	}
	
</style>
